<template>
    <div class="detailsD">
<!--        <courseallhome></courseallhome>-->
        <div class="leftImg">
            <img :src="classImg.coverFileUrl" alt="">
            <ul>
                <li>{{classImg.courseTitle}}</li>
                <li>累计学习{{classImg.participationsCount}}人 <a-rate :value="Math.round(classArr.score)" disabled /></li>
                <li style="color: #42b983;font-size: 20px;font-weight: bold" v-if="classImg.isFree==1">免费
                    <br>
                        <button class="select" @click="lookNow">立即观看</button>

                </li>
                <li class="money" v-if="classImg.isFree==0"><div>￥{{classImg.discountPrice}}</div>
                    <div v-if="classImg.isDiscount ==1" style="color: black" ><del>{{classImg.coursePrice}}</del></div>
                    <div class="discountmoney" v-if="classImg.discountDesc=='限时钜惠'">限时钜惠</div>
                    <button @click="shoppingN" class="shopCourse">立即购买</button>
                    <button class="shopingCar">加入购物车</button>
                </li>
                <li><a-icon type="heart" />收藏</li>
            </ul>
        </div>
        <div class="qie">
            <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane style="padding-left: 20px" key="1" tab="课程详情" v-html="classImg.courseDetail">
                </a-tab-pane>
                <a-tab-pane key="2" tab="目录" force-render>
                    <div class="sonD" style="font-size: 20px" v-for="(item,index) in directory" :key="index">{{index+1}} 、{{item.sectionName}}
                        <a-button @click="shoppingN" class="download" type="primary">
                            <a-icon type="cloud-download"/> 下载
                        </a-button>
                        <div class="sonSonD" style="font-size: 14px" v-for="(item,index) in item.subSections" :key="index"> {{index+1}}-{{item.sectionName}} </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="评论" class="commentD">
                            <p style="font-size: 18px"> 评论</p>
                     <span>
                         <a-rate v-model="value" :tooltips="desc" />
                         <span class="ant-rate-text">{{ desc[value - 1] }}</span>
                     </span>
                    <textarea style="margin-top: 20px" cols="120" rows="10" placeholder="请发表您对课程的评论"></textarea>
                    <a-button type="primary">
                        发表评论
                    </a-button>
                    <a-comment style="border-bottom: 1px solid #B5B5B5" v-for="(item,index) in commentList" :key="index">
                        <template slot="actions">
                            <span key="comment-basic-like">
                                <a-tooltip title="Like">
                                    <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like" />
                                </a-tooltip>
                                <span style="padding-left: '8px';cursor: 'auto'">
                                               {{ likes }}
                                </span>
                            </span>
                            <span key="comment-basic-dislike">
                                <a-tooltip title="Dislike">
                                    <a-icon type="dislike" :theme="action === 'disliked' ? 'filled' : 'outlined'" @click="dislike"/>
                                       </a-tooltip>
                                <span style="padding-left: '8px';cursor: 'auto'">
                                          {{ dislikes }}
                                      </span>
                            </span>
                        </template>
                        <a slot="author">{{item.user.nickname}}</a>
                        <a-avatar
                                slot="avatar"
                                alt="Han Solo"
                        />
<!--                        <img :src="" alt="">-->
                        <p slot="content" >
                           {{item.commentContent}}
                        </p>
                    </a-comment>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import {getUserInfo} from "../api/api";
    export default {
        name: "detailsmin",
        data(){
            return{
                classArr:[],
                classImg:[],
                directory:[],
                value: 5,
                desc: ['差', '一般', '中等', '好', '非常好'],
                likes: 0,
                dislikes: 0,
                action: null,
                moment,
                commentList:[]
            }
        },
        methods: {
            lookNow(){
                getUserInfo().then(res=>{
                    if (res.code == 0){
                        this.$message.info('giaogiao没有这个东西');
                    }else {
                        this.$store.commit('changelogin',true)
                    }
                })
            },
            shoppingN(){
                getUserInfo().then(res=>{
                    if (res.code == 0){
                            this.$message.info('giaogiao没有这个东西');
                    }else {
                        this.$store.commit('changelogin',true)
                    }
                })

            },
            callback(key) {
                console.log(key);
            },
            like() {
                this.likes = 1;
                this.dislikes = 0;
                this.action = 'liked';
            },
            dislike() {
                this.likes = 0;
                this.dislikes = 1;
                this.action = 'disliked';
            },

        },
        created() {
            // console.log(this.$route.query.courseid)
            this.courseId=this.$route.query.courseid;
            this.$axios.get('http://wkt.myhope365.com/pc/course/detail/'+this.courseId).then(res=>{
                console.log(res.data.data.sections)
                this.classArr=res.data
                this.classImg=res.data.data
                this.directory = res.data.data.sections
            })
            this.$axios.get('http://wkt.myhope365.com/weChat/applet/comment/commentList/course/'+this.courseId).then(res=>{
                console.log(res.data.rows)
               this.commentList = res.data.rows
            })
        },

    }

</script>

<style scoped lang="less">
    .commentD {
        padding: 20px;
        textarea{
            border-color: #BFBFBF;
            width: 100%;
            height: 200px;
        }
    }
    .pingL {
        padding-right: 20px;
        margin-top: 40px;
    }
    .pingL p {
        position: relative;
        margin-top: 20px !important;
        display: inline-block;
    }
    .pingL span {
        float:right;
        margin-top: 20px;
    }
    /*目录*/
    .sonD{
        position: relative;
        margin-left: 20px;
        margin-bottom: 20px;
        font-weight: bold;
    }
    .download{
        color: white;
        background-color: #4DC2F7;
        width: 100px;
        height: 35px;
        position: absolute;
        right: 20px;
        top: -5px;
    }
    .sonSonD{
        padding-left: 10px;
        height: 50px;
        line-height: 50px;
        font-weight: normal;
        margin-top:5px;
        background-color: #F2F2F2;
    }
    /*中间部分是否购买*/
    .money {
        overflow: hidden;
    }
    .qie{
        background-color: white;
        margin-bottom: 10px;
    }
    .money div:first-child{
        margin: 10px 0px;
        display: inline-block;
        color: red;
        font-size: 20px;
    }
    .money div:nth-child(2){
        display: inline-block;
        color: #B5B5B5;
        font-size: 16px;
        margin: 0px 50px 0px 10px;
    }
    .money div:nth-child(3){
        width: 64px;
        height: 22px;
        font-size: 10px;
        border: 1px solid orange;
        background-color: #FFF8EA;
        color: orange;
        text-align: center;
        line-height: 22px;
    }
    .shopCourse{
        margin:20px auto;
        width:160px;
        text-align: center;
        height:46px;
        line-height:50px;
        background-color: orange;
        font-size:18px;
        /*border-radius: 4px;*/
        border:0;
        color:white;
    }
    .select{
        margin:10px auto;
        width:160px;
        text-align: center;
        height:46px;
        line-height:50px;
        background-color: orange;
        font-size:18px;
        /*border-radius: 4px;*/
        border:0;
        color:white;
    }
    .detailsD{
        /*position: relative;*/
        overflow: hidden;
        background-color: #E8E8E8;
        padding: 0px 160px;
    }
    .shopingCar{
        margin:20px ;
        width:160px;
        text-align: center;
        height:46px;
        line-height:50px;
        background-color: #42b983;
        font-size:18px;
        /*border-radius: 4px;*/
        border:0;
        color:white;
    }
    .leftImg{
        position: relative;
        overflow: hidden;
        margin: 20px 0px;
        width: 1200px;
        height: 270px;
        padding: 20px;
        background-color: white;
        display: flex;
        ul{
            margin-left: 30px;
            li:nth-child(1) {
                /*margin-top: 10px;*/
                font-size: 24px;
                font-weight: bold;
            }
            li:nth-child(2){
                margin-top: 10px;
                color: #B5B5B5;
                font-size: 16px;
            }

            li:last-child{
                position: absolute;
                right: 50px;
                top: 30px;
                width: 110px;
                height: 30px;
                border: 1px solid #BFBFBF;
                color: #BFBFBF;
                text-align: center;
                line-height: 30px;
            }

        }

    }

</style>